import PageTitle from "@/components/PageTitle";
import { computed, defineComponent, ref } from "vue";
import { useRequest } from "./request";
import { FormGroupPropsData } from "@/components/FormGroup/types";
import CardView from "@/components/CardView";
import FormGroup from "@/components/FormGroup";
import ButtonView from "@/components/ButtonView";
import { IFormRef } from "@/components/Form/types";
export default defineComponent({
  name: "",
  setup() {
    const userInfo = localStorage.getItem("userInfo") as string;
    const userInfoJSON = JSON.parse(userInfo) as any;
    const form = ref({
      name: userInfoJSON.name,
      phone: userInfoJSON.phone,
    });
    const { confirm, problemType } = useRequest();
    const formRef = ref<IFormRef>();
    return () => {
      const data = computed<FormGroupPropsData[]>(() => [
        {
          data: [
            {
              label: "真实姓名",
              type: "input",
              key: "name",
              readonly: true,
              placeholder: "输入姓名",
              rules: [
                {
                  required: true,
                  message: "请输入真实姓名",
                },
              ],
            },
            {
              label: "联系电话",
              type: "input",
              key: "phone",
              readonly: true,
              placeholder: "输入电话",
              rules: [
                {
                  required: true,
                  // regular: /^1[3-9]\d{9}$/,
                  message: "请输入正确的联系电话",
                },
              ],
            },
            {
              label: "问题类型",
              type: "select",
              key: "type",
              rules: [
                {
                  required: true,
                  message: "请选择问题类型",
                },
              ],
              typeData: problemType.value,
            },
          ],
        },
        {
          title: "",
          data: [
            {
              label: "上传附件",
              type: "upload",
              maxLength: 1,
              key: "path",
            },
          ],
        },
        {
          title: "",
          data: [
            {
              key: "content",
              label: "主体介绍",
              type: "textarea",
              rules: [
                {
                  required: true,
                  message: "请输入主体介绍",
                },
              ],
            },
          ],
        },
      ]);
      return (
        <PageTitle title="意见反馈">
          <div class={"p-[10px]"}>
            <FormGroup data={data.value} v-model={form.value} ref={formRef} />
            <ButtonView
              type="primary"
              block
              class="!h-[40px] !mt-[19px] "
              onClick={() => {
                formRef.value?.submit(({ result, error, submitState }) => {
                  submitState && confirm(form.value);
                });
              }}
            >
              确定
            </ButtonView>
          </div>
        </PageTitle>
      );
    };
  },
});
